<template>
  <div class="sidebar_box">
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 1 ? 'ZHGJActive' : 'ZHGJ'"
      @click="AddSidebarAcitve(1)"
    ></div>
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 2 ? 'HZJCActive' : 'HZJC'"
      @click="AddSidebarAcitve(2)"
    ></div>
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 3 ? 'ZNJJActive' : 'ZNJJ'"
      @click="AddSidebarAcitve(3)"
    ></div>
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 4 ? 'HJJCActive' : 'HJJC'"
      @click="AddSidebarAcitve(4)"
    ></div>
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 5 ? 'AFSXAcitve' : 'AFSX'"
      @click="AddSidebarAcitve(5)"
    ></div>
    <div
      class="sidebar_item"
      :class="SidebarAcitve == 6 ? 'QTSBActive' : 'QTSB'"
      @click="AddSidebarAcitve(6)"
    ></div>
  </div>
</template>
<script setup>
import { ref } from "vue"
const SidebarAcitve = ref(1)
const AddSidebarAcitve = (e) => {
  console.log(e)
  window.Cocospublic({ MsgName: "ModuleChange", Index: e })
  SidebarAcitve.value = e
}
</script>
<style scoped lang="less">
.sidebar_box {
  width: 100%;
  height: 100%;
  background-color: #96aec5;
  border-radius: 16px;
  overflow-y: scroll;
  .sidebar_item {
    width: 180px;
    height: 180px;
    background-color: pink;
    margin: auto;
    margin-top: 24px;
  }

  .ZHGJ {
    cursor: pointer;
    background: url("@/assets/Sidebar/11.png") no-repeat center;
    background-size: 100% 100%;
  }
  .ZHGJ:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/4.png") no-repeat center;
    background-size: 100% 100%;
  }
  .ZHGJActive {
    cursor: pointer;
    background: url("@/assets/Sidebar/4.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HZJC {
    cursor: pointer;
    background: url("@/assets/Sidebar/12.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HZJC:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/5.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HZJCActive {
    cursor: pointer;
    background: url("@/assets/Sidebar/5.png") no-repeat center;
    background-size: 100% 100%;
  }
  .ZNJJ {
    cursor: pointer;
    background: url("@/assets/Sidebar/13.png") no-repeat center;
    background-size: 100% 100%;
  }
  .ZNJJ:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/6.png") no-repeat center;
    background-size: 100% 100%;
  }
  .ZNJJActive {
    cursor: pointer;
    background: url("@/assets/Sidebar/6.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HJJC {
    cursor: pointer;
    background: url("@/assets/Sidebar/14.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HJJC:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/7.png") no-repeat center;
    background-size: 100% 100%;
  }
  .HJJCActive {
    cursor: pointer;
    background: url("@/assets/Sidebar/7.png") no-repeat center;
    background-size: 100% 100%;
  }
  .AFSX {
    cursor: pointer;
    background: url("@/assets/Sidebar/15.png") no-repeat center;
    background-size: 100% 100%;
  }
  .AFSX:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/8.png") no-repeat center;
    background-size: 100% 100%;
  }
  .AFSXAcitve {
    cursor: pointer;
    background: url("@/assets/Sidebar/8.png") no-repeat center;
    background-size: 100% 100%;
  }
  .QTSB {
    cursor: pointer;
    background: url("@/assets/Sidebar/17.png") no-repeat center;
    background-size: 100% 100%;
  }
  .QTSB:hover {
    cursor: pointer;
    background: url("@/assets/Sidebar/10.png") no-repeat center;
    background-size: 100% 100%;
  }
  .QTSBActive {
    cursor: pointer;
    background: url("@/assets/Sidebar/10.png") no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
